<!--
 * @Description: 查询物流信息
 * @Author: liyujie
 * @Date: 2021/02/07
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/02/07
-->
<template>
    <section class="wrapper">
        <div class="header">
            <div class="header-title">快递公司：{{ logistics ? logistics.logistics_name : '--' }}</div>
            <div class="header-title">快递单号：{{ logistics ? logistics.tracking_no : '--' }}</div>
        </div>
        <el-timeline v-if="list.length">
            <el-timeline-item
                v-for="(item, index) in list"
                :key="index"
            >
                <div class="logistics-view">
                    <div class="date">
                        {{ item.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                    </div>
                    <div class="info">
                        {{ item.info }}
                    </div>
                </div>
            </el-timeline-item>
        </el-timeline>
        <div
            class="empty"
            v-else
        >
            暂无物流信息
        </div>
    </section>
</template>

<script>
export default {
    name: 'LogisticsInfo',
    props: {
        logistics: {
            type: Object,
            default: null
        },
        list: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    data() {
        return {
            result: []
        };
    },
    mounted(){},
    methods:{}
};
</script>

<style scoped lang="less">
.wrapper {
    width: 1036px;
    height: 438px;
    padding: 32px;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #CAD0DC;
    display: flex;
    flex-direction: column;
    position: relative;
    .header {
        display: flex;
        margin-bottom: 42px;
        .header-title {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-right: 32px;
        }
    }

    /deep/ .el-timeline {
        height: 346px;
        overflow: auto;
        &::-webkit-scrollbar {
            width: 6px;
        }
        .logistics-view {
            display: flex;
            font-family: PingFangSC-Regular, PingFang SC;
            font-size: 14px;
            font-weight: 400;
            align-items: flex-start;
            .date {
                color: #999;
                margin-right: 26px;
                margin-top: 4px;
            }
            .info {
                color: #333;
                line-height: 22px;
                width: 352px;
            }
        }
    }
    .empty {
        position: absolute;
        color: #909399;
        font-weight: 400;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>
